<template>
    <div class="materialFile">
        <div class="header">
            <el-input placeholder="请输入关键字搜索" v-model="keyword" size="small" style="width: 300px">
                <span slot="suffix" class="iconfont icon-sousuo" @click="filterList"></span>
            </el-input>
            <div class="iconBtn">
                <el-tooltip effect="light" content="添加" placement="top" :enterable="false"
                            v-if="menuAuthCodes.includes(authCode[materialType][1])">
                    <span class="iconfont icon-tianjia" @click="addFile"></span>
                </el-tooltip>
                <input type="file" @change="picChange" :accept="uploadType" id="uploadFile" style="display:none" />
            </div>
        </div>
        <element-table :data="fileList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                       :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
        </element-table>

        <el-dialog :title="previewTitle" :visible.sync="previewVisible" width="680px" :before-close="previewClose">
            <audio :src="previewUrl" v-if="previewType == 'voice'" controls style="width: 100%"></audio>
            <video :src="previewUrl" v-else-if="previewType == 'video'" controls style="width: 100%"></video>
        </el-dialog>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import { getFileList, addFile, editFile, delFile } from "@/api/material.js"
import { lingYanUpload } from "@/utils/upload";

export default {
    name: "materialFile",
    props: {
        classId: {
            type: String,
        },
        materialType: {
            type: String,
            default: ""
        },
    },
    watch: {
        classId(val) {
            this.classId = val;
            this.pageNo = 1;
            this.getFileList();
        },
        materialType(val) {
            this.fileList = [];
            this.pageNo = 1;
            this.getFileList();
        }
    },
    data() {
        return {
            keyword: "",
            fileList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            editId: "",
            cloumns: [
                {
                    config: {
                        label: "素材预览",
                    },
                    render: (h, scope) => {
                        if (this.materialType == "picture") {
                            return (<el-image v-viewer src={scope.url}></el-image>)
                        } else if (this.materialType == "voice") {
                            return (<i class="el-icon-microphone elIcon" onClick={() => this.preview(scope, "voice")}></i>)
                        } else if (this.materialType == "video") {
                            return (<i class="el-icon-video-camera elIcon" onClick={() => this.preview(scope, "video")}></i>)
                        } else if (this.materialType == "file") {
                            return (<i class="el-icon-folder-opened" style="font-size: 22px"></i>)
                        }
                    },
                },
                {
                    config: {
                        label: "素材名称",
                        prop: "fileName",
                    }
                },
                {
                    config: {
                        label: "分类",
                        prop: "className",
                    },
                    render: (h, scope) => {
                        return (
                            <span>{scope.className ? scope.className : "全部分类"}</span>
                        )
                    }
                },
                {
                    config: {
                        label: "创建时间",
                        prop: "addTime",
                    }
                },
                {
                    config: {
                        label: "最后更新时间",
                        prop: "updateTime",
                    }
                },
                {
                    config: {
                        label: "操作",
                        width: "100"
                    },
                    render: (h, scope) => {
                        return (
                            <div class="operation">
                                <el-tooltip effect="light" content="编辑" placement="top" enterable={false}
                                    v-show={this.menuAuthCodes.includes(this.authCode[this.materialType][2])}>
                                    <span class="iconfont icon-bianjidaan" onClick={() => this.editFile(scope.id)}></span>
                                </el-tooltip>
                                <el-tooltip effect="light" content="删除" placement="top" enterable={false}
                                    v-show={this.menuAuthCodes.includes(this.authCode[this.materialType][3])}>
                                    <span class="iconfont icon-shanchu" onClick={() => this.delFile(scope.id)}></span>
                                </el-tooltip>
                            </div>
                        );
                    },
                }
            ],
            authCode: {
                picture: ["M154", "M156", "M157", "M158"], //查看、添加、编辑、删除
                voice: ["M165", "M166", "M167", "M168"],
                video: ["M170", "M180", "M181", "M182"],
                file: ["M184", "M185", "M186", "M187"],
            },
            previewVisible: false,
            previewTitle: "",
            previewType: "",
            previewUrl: "",
        }
    },
    created() {
        this.getFileList();
    },
    methods: {
        getFileList() {
            if (!this.menuAuthCodes.includes(this.authCode[this.materialType][0])) {
                return;
            }
            this.tableLoading = true;
            var param = {
                classId: this.classId,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                type: this.materialType,
                keyword: this.keyword,
            }
            getFileList(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var data = resp.data;
                    this.total = data.total;
                    this.fileList = data.fileList;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        filterList() {
            this.pageNo = 1;
            this.getFileList();
        },
        addFile() {
            this.editId = "";
            document.getElementById("uploadFile").click();
        },
        delFile(id) {
            if (!this.menuAuthCodes.includes(this.authCode[this.materialType][3])) {
                return;
            }
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delFile({ ids: id }).then(resp => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.getFileList();
                    } else {
                        this.$antMessage.warning("删除失败");
                    }
                });
            }).catch();
        },
        editFile(id) {
            if (!this.menuAuthCodes.includes(this.authCode[this.materialType][2])) {
                return;
            }
            this.editId = id;
            document.getElementById("uploadFile").click();
        },
        async picChange(event) {
            var materialObj = {
                picture: { title: "图片", size: 30 },
                voice: { title: "语音", size: 30 },
                video: { title: "视频", size: 100 },
                file: { title: "文件", size: 30 }
            };
            var file = event.target.files[0];
            var currentType = materialObj[this.materialType];
            if (file.size > (currentType.size) * 1024 * 1024) {
                document.getElementById("uploadFile").value = "";
                return this.$antMessage.warning(currentType.title + "大小不能超过" + currentType.size + "M!");
            }
            let loading = this.$loading({
                lock: true,
                text: '上传中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            var uuid = "uuid-" + new Date().getTime();
            var upload = await lingYanUpload(file, uuid);
            loading.close();
            if (upload?.data?.remoteURL) {
                var param = {
                    type: this.materialType,
                    url: upload.data.remoteURL,
                    classId: this.classId,
                    fileName: upload.data.fileName
                }
                if (!this.editId) {
                    addFile(param).then(resp => {
                        if (resp.status == 0) {
                            this.$antMessage.success("添加成功");
                            this.pageNo = 1;
                            this.getFileList();
                        } else {
                            this.$antMessage.warning(resp.message);
                        }
                    });
                } else {
                    param.id = this.editId;
                    editFile(param).then(resp => {
                        if (resp.status == 0) {
                            this.$antMessage.success("编辑成功");
                            this.pageNo = 1;
                            this.getFileList();
                        } else {
                            this.$antMessage.warning(resp.message);
                        }
                    });
                }
            }
            document.getElementById("uploadFile").value = "";
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getFileList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getFileList();
        },
        copyLink(url) {
            let oInput = document.createElement('input');
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            this.$antMessage.success("复制成功");
            oInput.remove()
        },
        preview(data, type) {
            this.previewTitle = data.fileName;
            this.previewType = type;
            this.previewUrl = data.url;
            this.previewVisible = true;
        },
        previewClose() {
            this.previewType = this.previewTitle = this.previewUrl = "";
            this.previewVisible = false;
        }
    },
    computed: {
        uploadType() {
            var obj = {
                "picture": "image/*",
                "voice": "audio/*",
                "video": "video/*",
                "file": "*"
            }
            return obj[this.materialType]
        },
        tableHeight() {
            return document.body.clientHeight - 300;
        },
    },
    components: {
        elementTable,
    }
}
</script>

<style lang="scss">
.materialFile {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .el-table .el-image {
        height: 50px;
    }
    .elIcon {
        font-size: 22px;
        cursor: pointer;
    }
}
</style>